<template>
  <div class="lix-sch">
    <div class="lix-sch__header">
      <div class="imgs">
        <img src="../../assets/02.png" alt="">
      </div>
      <p class="title">陆轩</p>
      <p class="desc">汉族 | 1990年09月02日</p>
      <van-rate class="rate" v-model="value" :size="13" disabled disabled-color="#ff6c60"/>
      <div class="lix-sch__category">
        <div>教学分类：</div>
        <div class="cate-list">
          <div class="cate-item" v-for="(item, idx) in category" :key="idx">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="lix-sch__desc">
        简介：新东方在线四六级阅读主讲老师，新东方武汉学校四六级，考研，考博，专八英语名师。
      </div>
      <div class="follow">
        <button>+ 关注</button>
      </div>
    </div>
    <div class="lix-sch__content">
      <van-tabs v-model="active" :line-width="18">
        <van-tab v-for="item in tabTitle" :key="item.id">
          <div slot="title">
            {{ item.title }}
          </div>
          <div v-if="item.id === 0" class="tabFirst">
            <div class="lix-sch__firsttab" v-html="rawHtml"></div>
            <div class="tab-btn">
              <button>
                <img src="../../assets/call.png" alt="" class="button-img">客服热线
              </button>
            </div>
          </div>
          <div v-else>
            <!-- 常规列表 -->
            <div class="lix-cate__list" v-if="!isAbnor">
              <div class="lix-cate__item" v-for="index in 10" :key="index">
                <img src="../../assets/24.png" />
                <div class="info">
                  <p class="title van-ellipsis">{{ listData.title }}</p>
                  <p class="author">主讲师：{{ listData.author }}</p>
                  <p class="author">开课时间：{{ listData.time }}</p>
                  <p class="price"><span>￥</span>{{ listData.price }}</p>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Rate, Tab, Tabs } from 'vant'
Vue.use(Tab).use(Tabs).use(Rate)
const html = '<html>' +
'<body>' +
'<h1>春晓</h1>' +
'<p>' +
'    春眠不觉晓，' +
'      处处闻啼鸟。' +
'        夜来风雨声，' +
'          花落知多少。' +
'</p>' +
'<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>' +
'</body>' +
'</html>'

export default {
  name: 'school',
  components: {
  },
  data () {
    return {
      tabTitle: [
        {id: 0, title: '资质证件'},
        {id: 1, title: '精品课程'}
      ],
      value: 3,
      rawHtml: html,
      listData: {
        title: '海龙硬笔书法速成•实用性海龙硬笔书法速成•实用性海龙硬笔书法速成•实用性海龙硬笔书法速成•实用性',
        author: '王道远',
        time: '2018-08-16',
        price: 89.00
      },
      category: [
        '硬笔书法',
        '日系漫画'
      ]
    }
  }
}
</script>

<style lang="less">
  p {
    margin: 0;
    padding: 0;
  }
  .lix-sch {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    background-color: #fff;
    min-height: 100%;

    & .lix-sch__header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      margin-top: 10px;
      border-bottom: 10px solid #f5f5f5;

      img {
        width: 92px;
        height: 92px;
        border-radius: 50%;
        border: 8px solid #eff3f9;
      }

      & .title {
        margin-top: 20px;
        font-size: 18px;
        color: #333333;
        font-weight: 900;
      }

      & .desc {
        margin-top: 12px;
        font-size: 12px;
        color: #6d6d6d;
      }

      & .rate {
        margin-top: 10px;
      }

      & .follow {
        & button {
          margin-top: 10px;
          width: 63px;
          height: 25px;
          border-radius: 13px;
          border: 1px solid #ff6046;
          background-color: #fff;
          color: #ff6046;
        }
        padding-bottom: 10px;
      }
    }

    & .lix-sch__content {
      .tabFirst {
        margin: 0 10px;

        & button {
          width: 356px;
          height: 40px;
          background-color: #f8b551;
          color: #fff;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          border-radius: 20px;
          border: none;
        }

        & .button-img {
          height: 27px;
          width: 27px;
        }

        & .tab-btn {
          position: fixed;
          bottom: 10px;
          left: 10px;
        }
      }
    }
    .lix-cate__item {
      display: flex;
      padding: 15px 35px 15px 10px;
      border-bottom: 1px solid #efefef;
    }
    .lix-cate__item > img {
      flex: 0 0 43%;
      width: 142px;
      height: 82px;
    }
    .lix-cate__item .info {
      flex: 0 0 57%;
      max-width: 200px;
      margin-left: 10px;
    }
    .lix-cate__item .info .title {
      font-size: 16px;
      color: #292929;
    }
    .lix-cate__item .info .author {
      margin-top: 2px;
      font-size: 12px;
      color: #939393;
    }
    .lix-cate__item .info .price {
      margin-top: 6px;
      font-size: 14px;
      color: #ff0036;
    }
    .lix-cate__item .info .price ._span {
      font-size: 10px;
    }

    .lix-sch__category {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      margin: 10px 40px 0 40px;

      & .cate-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      }

      & .cate-item {
        margin-left: 6px;
        height: 29px;
        font-size: 13px;
        line-height: 29px;
        border-radius: 14px;
        background-color: #f7f7f7;
        padding: 0 13px;
      }
    }

    .lix-sch__desc {
      margin: 10px 40px;
      text-align: left;
    }
  }
</style>
